/**
* 系统管理 菜单管理
*/
<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>菜单管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索筛选 -->
		<div class="user-search">
			<el-button type="primary" @click="handleEdit">添加菜单</el-button>
		</div>
		<!--列表-->
		<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
			v-loading="loading" :tree-props="{children: 'menus'}">
			<el-table-column prop="id" label="id" sortable width="350"> </el-table-column>
			<el-table-column prop="menuName" label="菜单名称" sortable width="180"> </el-table-column>
			<el-table-column prop="name" label="前端名称" sortable width="180"> </el-table-column>
			<el-table-column prop="url" label="前端地址"> </el-table-column>
      <el-table-column prop="icon" label="前端图标"> </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
		<!-- 添加界面 -->
		<el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @click='closeDialog("edit")'>
			<el-form label-width="120px" :model="editForm" ref="editForm" :rules="rules">
				<el-form-item label="父级Id" prop="parentId">
					<el-input size="small" v-model="editForm.parentId" auto-complete="off" placeholder="请输入父级Id(如果是一级菜单可不填写)">
					</el-input>
				</el-form-item>
				<el-form-item label="菜单名称" prop="menuName">
					<el-input size="small" v-model="editForm.menuName" auto-complete="off" placeholder="请输入菜单名称">
					</el-input>
				</el-form-item>
				<el-form-item label="菜单编码" prop="menuCode">
					<el-input size="small" v-model="editForm.menuCode" auto-complete="off" placeholder="请输入菜单名称">
					</el-input>
				</el-form-item>
				<el-form-item label="前端名称" prop="name">
					<el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入前端名称(一级菜单可不写)">
					</el-input>
				</el-form-item>
				<el-form-item label="前端地址" prop="url">
					<el-input size="small" v-model="editForm.url" auto-complete="off" placeholder="请输入前端地址(一级菜单可不写)">
					</el-input>
				</el-form-item>
				<el-form-item label="前端图标" prop="icon">
					<el-input size="small" v-model="editForm.icon" auto-complete="off" placeholder="请输入前端图标"></el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click='closeDialog("edit")'>取消</el-button>
				<el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">
					保存
				</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import Pagination from '../../components/Pagination'
	export default {
		// 注册组件
		components: {
			Pagination
		},
		data() {
			return {
				tableData: [],
				// 分页参数
				pageparm: {
					currentPage: 1,
					pageSize: 10,
					total: 10
				},
				formInline: {
					page: 1,
					rows: 10
				},
				loading: false,
				editForm: {
					parentId: '',
					menuName: '',
					menuCode: '',
					name: '',
					url: '',
					icon: '',
				},
				editFormVisible: false,
				title: '添加',
				rules: {
					menuCode: [{
						required: true,
						message: '请输入菜单编码',
						trigger: 'blur'
					}],
					menuName: [{
						required: true,
						message: '请输入菜单名称',
						trigger: 'blur'
					}],
					icon: [{
						required: true,
						message: '请输入前端图标',
						trigger: 'blur'
					}]
				},
			}
		},
		created() {
			this.getUmsMenu()
		},
		methods: {
			getUmsMenu() {
				this.loading = true;
				this.$http({
					url: "sys/umsMenu/findUmsMenusTreePage",
					method: 'GET',
					params: this.formInline
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.loading = false
						this.tableData = res.data.list
            console.log(this.tableData)
						this.pageparm.currentPage = res.data.pageNum
						this.pageparm.pageSize = res.data.pageSize
						this.pageparm.total = res.data.total

					} else {
						this.loading = false
					}
				})
			},
			// 分页插件事件
			callFather(parm) {
				this.formInline.page = parm.currentPage
				this.formInline.rows = parm.pageSize
				this.getUmsMenu()
			},
			handleEdit(row) {
        if(row.id){
          this.title = '修改'
          this.editFormVisible = true
          this.editForm = row
        }else{
          this.title = '添加'
          this.editFormVisible = true
          this.editForm.parentId = ''
          this.editForm.menuName = ''
          this.editForm.menuCode = ''
          this.editForm.name = ''
          this.editForm.url = ''
          this.editForm.icon = ''
          this.editForm.id = ''
        }

			},
			// 删除菜单
			handleDelete(row) {
			  this.$confirm('确定要删除吗?', '信息', {
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      type: 'warning'
			    })
			    .then(() => {
			     this.$http({
			       url: "sys/umsMenu/deleteById/"+ row.id,
			       method: 'POST',
			     }).then(res => {
			       if (res.code == 200) {
			        this.getUmsMenu()
			       }
			     })
			    })
			    .catch((e) => {
						  console.log(e)
			      this.$message({
			        type: 'info',
			        message: '已取消删除'
			      })
			    })
			},
			// 关闭编辑、增加弹出框
			closeDialog() {
				this.editFormVisible = false
			},
			// 编辑、增加页面保存方法
			submitForm(editData) {
				this.$refs[editData].validate(valid => {
					if (valid) {
           var url = ''
          if(this.editForm.id){
            url = 'sys/umsMenu/updateMenuByParam'
          }else{
            url = 'sys/umsMenu/insert'
          }
						this.$http({
							url: url,
							method: 'POST',
							data: this.editForm
						}).then(res => {
							console.log(res)
							this.editFormVisible = false
							this.loading = false
							if (res.code == 200) {
								this.getUmsMenu()
							}
						})
					} else {
						return false
					}
				})
			},
		},
	}
</script>


<style scoped>
	.user-search {
		margin: 20px 0px;

		align-items: flex-start;

	}

	.userRole {
		width: 100%;
	}
</style>
